@use '@scss/common' as *;

.tooltip {
  @include small;
  & {
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 2;
    transform: translate3d(-50%, -50%, 0);
    padding: 0.5rem 0.75rem;
    color: var(--theme-text);
    line-height: 0.75rem;
    font-weight: normal;
    white-space: nowrap;
    background-color: var(--theme-elevation-100);
    @include data-theme-selector('light') {
      background-color: var(--theme-elevation-0);
      box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.125);
    }
  }
}

.caret {
  position: absolute;
  transform: translateX(-50%);
  top: calc(100% - 0.0625rem);
  left: 50%;
  height: 0;
  width: 0;
  border: 10px solid transparent;
  border-top-color: var(--theme-elevation-100);
  @include data-theme-selector('light') {
    border-top-color: var(--theme-elevation-0);
  }
}
